<template>
    <!-- 未注册的学生 -->
    <div id="unRegisteredBox">
        <OperaAlert ref="hint" />
        <div class="toolbar">
            <div class="but">
                <button @click="importHandle" @mouseover="getExample = true">点击导入
                </button>
                <input type="file" name="upLode" ref="upLoadBut" @change="upLodeFile" id="upLode" style="display: none">
                <button @click="exportHandle">点击导出
                </button>
                <div class="tip" v-show="getExample" @mouseleave="getExample = false">
                    <GetExample type="1" @closeWin="closeWin"></GetExample>
                </div>
        
            </div>
            <div id="select">
                <li>
                    <Select :type="college" ref="col" @updateSubOptions="updateMajorOptions"></Select>
                </li>
                <li>
                    <Select :type="major" ref="maj"></Select>
                </li>
            </div>
            <div class="search">
                <input type="text" placeholder="搜索老师/课题/团队" @keyup="searchEvent1">
                <img src="../assets/images/teacher/myCourse/search.svg" alt="搜索">
            </div>
        </div>
        <div class="typeBox">
                    <button style="background-color: #707070;">全部</button>
                    <button @click="emits('changeType', 2)">已注册</button>
                </div>
        <table class="table">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <th>序号/目录</th>
                    <th>姓名</th>
                    <th>学号</th>
                    <th>学院</th>
                    <th>专业</th>
                    <th>班级</th>
                    <th>是否注册</th>
                    <th>选择删除</th>
                </tr>
                <tr v-for="(item, index) in tData" align="center" >
                    <td>{{(pageData.pageData.current-1)*pageData.pageData.pageSize+ index + 1 }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.number }}</td>
                    <td>{{ item.college }}</td>
                    <td>{{ item.major }}</td>
                    <td>{{ item.grades }}</td>
                    <td>{{ item.isRegistered ? '是' : '否' }}</td>
                    <td class="del">
                        <span  @click="del(item.subId)" v-show="!item.isRegistered">删除用户</span>
                    </td>
                </tr>
            </table>
        </table>
        <p class="opera">
            <div class="add" @click="addRow">点击添加行</div>
            <div class="add">点击添加列</div>
        </p>
    </div>
    <ChangeInfo @changePage="changePage" ref="info" @close="close" @succHandle="succHandle" @errHandle="errHandle" :dialogVisible="dialogVisible">
    </ChangeInfo>
    <InsertInfoWin :type="1" @close="close" @succHandle="succHandle" @errHandle="errHandle" :dialogVisible="addStudentWin"/>
    <div class="pagination">
        <Pagination ref="pageData" @changePage="changePage" />
    </div>
</template>
<script setup>
import { getUserData, exportTable, deleteUser} from '../utils';
import { getCurrentInstance, onMounted, ref } from 'vue';
import Pagination from './Pagination.vue';
import GetExample from './GetExample.vue'
import Select from '../components/Select.vue';
import ChangeInfo from './ChangeInfo.vue';
import InsertInfoWin from './InsertInfoWin.vue';


const http = getCurrentInstance()?.appContext.config.globalProperties.$http

// 获得用户信息
// 获得用户信息
let userData = {
    Token: '',
    avatar: '',
    id: '',
    role: ''
}
if (getUserData() != undefined) {
    userData = getUserData();
}
const pageData = ref()

const type = ref()

const emits=defineEmits(['changeType'])
// 获得筛选选项
let col = ref()
let maj = ref()

//放到表格的数据
const tData = ref()

const changePage = function (pd) {
    //得到未注册学生信息
    fetch(http + '/admin/subStudent?' + 'current=' + pd.current + '&pageSize=' + pd.pageSize, {
        method: 'get',
        headers: {
            "Token": userData.Token,
            'Content-Type': 'application/json; charset=utf-8'
        },
        responseType: 'json',
    }).then((response) => {
        return response.json()
    }).then((data) => {
        console.log(data);
        data = data.data
        //生成分页
        pageData.value.changePage(data)
        tData.value = data.records

        if (tData.value.length > 0) {
            let params = {
                school: tData.value[0].school
            }
            col.value.getFilterOptions(params)
        }
    }).catch((err) => {
        console.log(err);
    })
}

// 更新筛选选项
const updateMajorOptions = function (data) {
    // data是直接上级的属性值，是String不是Object
    let params = col.value.sumPar
    params.college = data
    maj.value.getFilterOptions(params)
}


// 导入表格
const getExample = ref(false)
// 关闭示例表提醒弹窗
const closeWin = function () {
    getExample.value = false
}

const upLodeFile = function (event) {
    let fd = new FormData()
    fd.append('file', event.target.files[0])

    fetch(http + '/admin/subStudent/excel', {
        method: 'post',
        headers: {
            "Token": userData.Token,
        },
        body: fd,
        responseType: 'json',
    }).then((response) => {
        return response.json()
    }).then((data) => {
       console.log(data);
    }).catch((err) => {
        console.log(err);
    })
}

// 删除成员
const deleteMem = function(){

}

const upLoadBut = ref()
const importHandle = function () {
    upLoadBut.value.click()
}

// 导出表格
const exportHandle = function () {
    exportTable(1)
}


const dialogVisible = ref(false)

const info = ref()
// 修改表格
const changeInfo = function (item) {
    dialogVisible.value = true
    info.value.changeInfo(item)
}


// 修改成功失败的提醒
const hint = ref()
const errHandle = function (text) {
    hint.value.errHandle(text)
}

const succHandle = function () {
    hint.value.succHandle()
}


const addStudentWin = ref(false)
// 添加行
const addRow = function(){
    addStudentWin.value = true  
}

const close = function () {
    dialogVisible.value = false
    addStudentWin.value = false
}

const del= function(id){
    const res = deleteUser(id)
    if(res != true){
        succHandle()
    }else{
        errHandle(res)
    }
}

</script>
<style scoped>
.table {
    width: 100%;
    border-collapse: collapse;
    border: solid 1px #bfbfbf;
}

.table table {
    width: 100%;
    font-family: Source Han Sans CN;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 31px;
    letter-spacing: 0px;
    color: #707070;
}

.table th {
    border: solid 1px #bfbfbf;
    background-color: #e4e7ed;
    height: 53px;
}

.table td {
    border: solid 1px #bfbfbf;
    height: 53px;
    background-color: white;
}

.tip {
    position: absolute;
    top: 115%;
    z-index: 10;
    left: -10%;
}

.toolbar {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2%;
}

.but {
    width: 30%;
    display: flex;
    justify-content: space-between;
    margin-right: 2%;
}

.but button {
    width: 45%;
    height: 44px;
    background-color: #8493a6;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    border: 0px;
    color: #fafafa;
    font-size: 1.1em;
    font-family: Source Han Sans CN;
    font-weight: normal;
    font-stretch: normal;
    cursor: pointer;
    ;
}

.search {
    width: 40%;
    height: 44px;
}

.search input {
    width: 100%;
    height: 100%;
    border: 0px;
    padding-left: 4%;
    background-color: #fcfcfd;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    font-family: Source Han Sans CN;
    font-size: 1.1em;
    letter-spacing: 0px;
    color: #707070;
    outline: none;
    padding-right: 11%;
}

.search img {
    position: absolute;
    right: 1%;
    height: 100%;
    scale: 0.6;
    cursor: pointer;
}

#select {
    padding-right: 1.3%;
    display: flex;
    width: 32%;
    height: 100%;
    justify-content: space-between;
}

#select li {
    width: 46%;
    list-style: none;
    height: 44px;
}
.opera{
    margin-top: 1%;
    display: flex;
    justify-content: flex-end;
}
.add{
    margin-left: 1.4%;
    font-family: Source Han Sans CN;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 18px;
    cursor: pointer;
	letter-spacing: 0px;
	color: #8493a6;
    border-bottom: 1px solid #8493a6;
}
.add:hover{
    opacity: 0.5;
}
.typeBox{
    width: 16%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1%;
}
.typeBox button{
    width: 43%;
    height: 30px;
    font-family: Source Han Sans CN;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 18px;
    cursor: pointer;
	letter-spacing: 0px;
	background-color: #8493a6;
    outline: none;
    border-radius: 3px;
    border: 0px;
    color: #fff;
}
.del{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Source Han Sans CN;
	font-weight: normal;
	font-stretch: normal;
	line-height: 18px;
    cursor: pointer;
	letter-spacing: 0px;
    color: #8493a6;

}
.del span{
    padding-bottom: 5%;
    width: 90%;
}
.del span:hover{
    border-bottom: 1px solid #8493a6;
    display: block;
    width: 90%;
    padding-bottom: 5%;
}
</style>